<template>
  <div class="app">
    <p>
      <router-link active-class="active" tag="span" :to="{name: 'Home'}">Girl</router-link>|
      <router-link active-class="active" tag="span" to="/foo">Foo</router-link>|
      <router-link active-class="active" to="/bar">Bar</router-link>|
      <router-link active-class="active" :to="{name: 'TodoList'}">TodoList</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
@import "~font-awesome/css/font-awesome.css";
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 600px;
  margin: 0 auto;
}

.exact-active {
  color: #42b983;
  font-weight: bold;
}

.active {
  /*color: red;*/
}

.router-link-active {
  /*color: red;*/
}

.router-link-exact-active {
  /*color: red;*/
}
</style>
